<template>
    <!--这是一个按钮，赋予click事件-->
    <van-button type="default" @click="onClick">正在审批</van-button>
    <!--弹出框，赋予chargeBtn事件-->
    <van-dialog
            v-model:show="show"
            title="弹出框"
            show-cancel-button
            :beforeClose="chargeBtn"
    >
        <!--输入框-->
        <van-field
                v-model="message"
                rows="1"
                autosize
                label="留言"
                type="textarea"
                placeholder="请输入留言"
        />
    </van-dialog>
</template>

<script>
    import Vue from 'vue';
    import { Dialog,Field } from 'vant';

    export default {
        data() {
            return {
                show: false,
                message: '',
            };
        },
        methods: {
            onClick() {
//当点击按钮时，显示弹出框
                this.show = true;
            },
            chargeBtn(action, done) {//确认or取消
                if (action === 'cancel') {//取消按钮
                    done();
                } else if (action === 'confirm') {//确定按钮
                    //向后端传值并关闭dialog弹出框
                    this.show = false;
                };
                this.message='';
                done();
            }
        }
    }
</script>

<style>
</style>

